<template>
	<view>
		<!-- 头部 -->
		<view class="bg-white  ">
			<view class="flex align-center justify-between padding bg-white" @click="pageScrollToMax"
				:style="{'padding-top':CustomBar+'rpx'} " style="position: fixed;left: 0;right: 0;z-index: 9999;">
				<image src="/static/home/imgsaomiao.png" class="head_icon" @click.stop="scanCode"></image>
				<view class="head_input rowsc">
					<image src="/static/icon/icon_sysous.png" mode="" class="head_input_search"></image>
					<input type="text" value="" placeholder="搜索岗位名称" class="text-sm" placeholder-style="color:#CCCCCC"
						v-model="inputValue" />
				</view>
				<!-- <image src="/static/home/imgxiaoxi.png" mode=" " class="head_icon" @click="message"></image> -->
			</view>
			<view class="flex align-center justify-between padding-lr" :style="{'padding-top':CustomBar+'rpx'} "
				style="opacity: 0;">
				<image src="/static/home/imgsaomiao.png" class="head_icon" @click.stop="scanCode"></image>
				<view class="head_input rowsc">
					<image src="/static/icon/icon_sysous.png" mode="" class="head_input_search"></image>
					<input type="text" value="" placeholder="搜索职位或者企业" class="text-sm"
						placeholder-style="color:#CCCCCC" />
				</view>
			</view>
			<!-- 轮播 -->
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class=""
				style="height: 320rpx;">
				<swiper-item class="rowsc" style="height: 320rpx;" v-for="(item,index) in rotationList" :key="index">
					<image :src="item.image" mode="aspectFill" class="swiper_image " @click="preview(0,[item.image])">
					</image>
				</swiper-item>
			</swiper>
			<!-- 	<view class="announcement align-center" style="box-sn hadow: 0px 0px 20px rgba(0, 0, 0, 0.06);">
				<view class="solid-right margin-left padding-right  text-black" style="width: 110rpx;">
					<view class="announcement_text">源工智推</view>
				</view>
				<view class="margin-left-sm">
					<view class="align-center">
						<view class="announcement_round"></view>
						<view class="onelineshow announcement_title" >{{getnoticeTitle0|| '暂无'}}</view>
					</view>
					<view class="align-center margin-top">
						<view class="announcement_round  "></view>
						<view class="onelineshow announcement_title" >{{getnoticeTitle1 || '暂无' }}</view>
					</view>
				</view>
			</view> -->
			<view class="rowsa loading  padding align-center">
				<view v-for="(item,index) in titleList" :key='index' @click="titleNum = item.id">
					<view :class="[{'active_title animation-scale-up':item.id == titleNum},'classify_title ']">
						{{item.title}}
					</view>
					<view :class="[{'classify_bottom animation-scale-up' :item.id == titleNum},'classify_heng']"></view>
				</view>
			</view>
		</view>
		<view class="integral animate__animated animate__bounceIn ">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="integral_image">
				<swiper-item v-for="(item,index) in rotationList2" :key='index' class="integral_image"
					@click="preview(0,item.image)">
					<image :src="item.image" mode="aspectFill" class="integral_image bg-gray"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 分类筛选 -->
		<view class="bg-white margin-lr margin-top-xs radius margin-top">
			<view class="rowsb 	 padding solid-bottom padding-bottom" style="color: #AAAAAA;">
				<view style="width: 50%;" class="rowsb align-center">
					<view :class="{'filtrate_address animation-scale-up ':1==typeIndex}"
						class="flex align-center filtrate_address2" @click="typeIndex =1">
						<biaofun-region @changeEmit="changeRegion" :placeholder="addressName" />
						<text class="cuIcon-unfold margin-left-xs" style="font-size: 20rpx;"></text>
					</view>
					<view :class="{'filtrate_address animation-scale-up':2==typeIndex}" class="filtrate_address2"
						@click="typeIndex=2">全部</view>
					<!-- <view :class="{'filtrate_address animation-scale-up':3==typeIndex}" @click="typeIndex=3"></view> -->
					<!-- 附近 -->
				</view>
				<view :class="{'filtrate_address animation-scale-up':3==typeIndex}" class="filtrate_address2"
					@click="typeIndex=3">
					<text>筛选</text>
					<text class="cuIcon-unfold margin-left-sm" style="font-size: 20rpx;"></text>
				</view>
			</view>
			<view class="flex flex-wrap padding rowsb animation-slide-top" v-if="typeIndex ==3">
				<view v-for="(item,index) in typeList" :key='index' class="filtrate_type"
					:class="{'filtrate_type_active animation-scale-up':item.status == typeIndex2}"
					@click="typeIndex2=item.status">
					{{item.name}}
				</view>
			</view>

			<view v-if="recruitList && recruitList.length !=0">
				<view class="work animation-scale-up" v-for="(item,index) in recruitList" :key="index"
					v-if="item.status ==typeIndex2 ||typeIndex2==''"
					@click="$tools.push('/pages/home/modules/recruit/detail?id='+item.id)">
					<view class="rowsb">
						<view class="work_title">
							{{item.worktype}}
						</view>
						<view class="work_pay">
							￥{{item.money}}{{item.danwei}}
						</view>
					</view>
					<view class="rowsb align-center">
						<view class="flex margin-tb-sm flex-wrap">
							<view v-for="(item01,index01) in item.fuli" class="award_title">{{item01 ||'暂无' }}</view>
						</view>
						<view class="award_type_pay">
							{{item.settle==1?'日':item.settle==2?'周':'月'}}
						</view>
					</view>
					<view class="flex rowsb align-center">
						<view class="align-center">
							<image :src="item.company.image" mode="" class="award_image"></image>
							<view class="margin-left-sm">
								<view class="award_name onelineshow">{{item.company.name ||'暂无企业名称'}}</view>
								<view class="align-center">
									<view>
										<image src="/static/home/imgdingwei.png" mode="" class="award_icon"></image>
									</view>
									<view class="award_content onelineshow margin-left-sm" style="width: 130rpx;">
										{{item.address}}
									</view>
									<view class="award_content margin-left-sm">招聘{{item.sum}}人</view>
								</view>
								<view class="award_content margin-left-xs " style="color: red;">
									服务费:{{item.fafangmoney}}元/{{item.settle==1?'日':item.settle==2?'周':'月'}}</view>
							</view>
						</view>
						<view class="award_submit">
							查看
						</view>
					</view>
				</view>
			</view>
			<!-- <view v-else class="rowsc padding-bottom animation-scale-up">
				<image src="../../static/icon_zanwu.png" mode="widthFix" style="width: 250rpx;"></image>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		rotation, //轮播图
		getnotice, //智能消息
		getrecruit_classify, //招聘类目
		getrecruit_list, //招聘信息
		getUserInfo
	} from '../../common/path.js'
	import {
		preview
	} from '../../common/updataImgList.js'
	export default {
		data() {
			return {
				titleList: [{
						title: '推荐职位',
						id: 1
					},
					{
						title: '热门职位',
						id: 2
					},
				],
				titleNum: 1, //默认选中的分类
				getnoticeList: [], //智推消息
				rotationList: [], //轮播图
				rotationList2: [], //轮播图 职位推荐
				getnoticeTitle0: '', //源工智推
				getnoticeTitle1: '', //源工智推
				recruitList: [], //列表
				addressName: '', //地区选择
				typeIndex: 1, //选中筛选方式
				tswitch: 1, //查询推荐岗位
				rswitch: 0, //查询热门岗位
				recruitclassify_id: '', //分类id
				typeList: [{
						name: '全部',
						status: '',
					},
					{
						name: '短期兼职',
						status: '1',

					},
					{
						name: '长期兼职',
						status: '2',

					},
					{
						name: '线上兼职',
						status: '3',

					},
				],
				typeIndex2: '', //筛选下的默认选中状态
				inputValue: '', //根据岗位搜索
				pageData: 1

			}
		},
		watch: {
			titleNum(event) {
				this.rswitch = 0
				this.tswitch = 0
				if (event == 1) {
					this.tswitch = 1
				} else {
					this.rswitch = 1
				}
				this.getrecruit_list()
			},
			inputValue() {
				this.getrecruit_list() //招聘信息
			},
			//分类筛选
			typeIndex(i) {
				if (i == 2) {
					// console.log('[全部]');
					this.typeIndex2 = ''
					this.addressName = '' //不根据地区查询
					this.getrecruit_list() //招聘信息
				}
			},
			//筛选
			typeIndex2(i) {
				this.getrecruit_list() //招聘信息
			}
		},
		onLoad() {
			this.rotation() //轮播图
			this.getnotice() //智推消息
			this.getrecruit_classify() //招聘类目
			this.getrecruit_list() //招聘信息
			this.getUserInfo()
		},
		onShow() {},
		methods: {

			//用户信息
			getUserInfo() {
				this.Http.POST(getUserInfo, {})
					.then(res => {
						if (res.code == 1) {
							console.log('[用户信息]', res);
							this.userIofo = res.data
							uni.setStorageSync('userIofo', res.data)
						} else {
							uni.reLaunch({
								url: '../login/loginTwo'
							})
						}
					})
			},
			/**
			 * 扫码
			 */
			scanCode() {
				let that = this
				// #ifdef H5
				this.$tools.showToast('暂不支持H5')
				// #endif
				uni.scanCode({
					success: function(res) {
						window.location.href = res.result
					},
					fail(err) {
						console.log('[扫码失败]', err);
						that.$tools.showToast('失败')
					}
				});
			},
			//弹到最底下
			pageScrollToMax() {
				uni.pageScrollTo({
					scrollTop: 330, // 设置一个超大值，以保证滚动条滚动到底部
					duration: 100
				});
			},
			preview(a, i) {
				preview(0, i)
			},
			//选择省市区
			changeRegion(region) {
				// console.log('[选择地址]', region);
				this.addressName = region.split(',')[2]
				this.getrecruit_list() //招聘信息
			},
			/**
			 * 扫码
			 */
			scanCode() {
				let that = this
				// #ifdef H5
				this.$tools.showToast('暂不支持H5')
				// #endif
				uni.scanCode({
					success: function(res) {
						// console.log('[扫码成功]', res.result);
					},
					fail(err) {
						// console.log('[扫码失败]', err);
						that.$tools.showToast('失败')
					}
				});
			},
			//招聘信息
			getrecruit_list() {
				this.recruitList = []
				let data = {
					page: 1, //第一页
					rows: 20, //每页条数
					address: this.addressName, //查询地址
					recruitclassify_id: this.recruitclassify_id, //分类id
					tswitch: this.tswitch,
					rswitch: this.rswitch,
					worktype: this.inputValue
				}
				if (this.tswitch == 1) { //推荐
					data.tswitch = 1
				} else if (this.rswitch == 1) { //热门
					data.rswitch = 1
				}
				this.Http.POST(getrecruit_list, data)
					.then((res) => {
						// console.log('[招聘]', res);
						if (res.code == 1) {
							this.recruitList = res.data
						} else {
							this.recruitList = []
						}
					})
			},
			//图片预览
			previewImage(index, array) {
				let imglist = []
				array.forEach(io => {
					imglist.push(io.image)
				})
				// console.log('[imglist]',imglist);
				uni.previewImage({
					current: index,
					urls: imglist,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
					}
				})
			},
			onReachBottom(e) {
				this.pageData++

				let data = {
					page: this.pageData, //第一页
					rows: 20, //每页条数
					address: this.addressName, //查询地址
					recruitclassify_id: this.recruitclassify_id, //分类id
					tswitch: this.tswitch,
					rswitch: this.rswitch,
					worktype: this.inputValue
				}
				if (this.tswitch == 1) { //推荐
					data.tswitch = 1
				} else if (this.rswitch == 1) { //热门
					data.rswitch = 1
				}
				this.Http.POST(getrecruit_list, data)
					.then((res) => {
						// console.log('[招聘]', res);
						if (res.code == 1) {
							if (this.pageData == 1) {
								this.recruitList = res.data
							} else {
								this.recruitList.push(...res.data)
							}
						} else {
							if (this.pageData == 1) {
								this.recruitList = []
							} else {}
						}
					})
			},

			//消息跳转
			message() {
				uni.reLaunch({
					url: '/pages/message/index'
				})
			},
			//轮播图
			rotation() {
				let data = {
					data: 1
				}
				this.Http.POST(rotation, data)
					.then(res => {
						if (res.code == 1) {
							// console.log('[轮播图]',res);
							this.rotationList = res.data
						} else {
							this.$tools.showToast(res.msg)
						}
					})
				let data2 = {
					data: 2
				}
				this.Http.POST(rotation, data2)
					.then(res => {
						if (res.code == 1) {
							// console.log('[轮播图职位推荐]', res);
							this.rotationList2 = res.data
						} else {
							this.$tools.showToast(res.msg)
						}
					})
			},
			//智能消息
			getnotice() {
				let data = {}
				this.Http.POST(getnotice, data)
					.then(res => {
						// console.log('[智能消息]', res);
						if (res.code == 1) {
							this.getnoticeTitle0 = res.data[0].title
							this.getnoticeTitle1 = res.data[1].title
							this.getnoticeList = res.data
						} else {
							this.$tools.showToast(res.msg)
						}
					})
			},
			//招聘类目
			getrecruit_classify() {
				let data = {}
				this.Http.POST(getrecruit_classify, data)
					.then(res => {
						// console.log('[招聘类目]', res);
						if (res.code == 1) {
							this.getnoticeList = res.data
						} else {
							this.$tools.showToast(res.msg)
						}
					})
			}
		}
	}
</script>

<style>
	page {
		background: #F7F6FA;
	}

	/* 头部 */
	.head {}

	.head_icon {
		width: 38rpx;
		height: 38rpx;
	}

	.head_input {
		display: flex;
		align-items: center;
		width: 652rpx;
		height: 70rpx;
		background: #F7F6FA;
		opacity: 1;
		border-radius: 35rpx;
		margin-left: 30rpx;
		background-repeat: no-repeat;
		/* background-image:radial-gradient(circle 16px, white 99%, transparent 0); */
		/* 第3层 头像 */
		/* linear-gradient(white 40px, transparent 0), */
		/* 第2层 标题 */
		/* linear-gradient(gray 100%, transparent 0); */
		/* 第1层 卡片背景 */
	}

	.head_input_search {
		width: 33rpx;
		height: 33rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	/* 头部 */

	/* 轮播 */
	.swiper_image {
		width: 710rpx;
		height: 300rpx;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	/* 轮播 */

	/* 公告 */
	.announcement {
		width: 710rpx;
		height: 134rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 20rpx rgba(0, 0, 0, 0.06);
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.announcement_text {
		font-size: 32rpx;
		font-weight: 1000;
	}

	.announcement_img {
		width: 63rpx;
		height: 70rpx;
	}

	.announcement_round {
		width: 10rpx;
		height: 10rpx;
		background: #00D88F;
		border-radius: 50%;
	}

	.announcement_title {
		width: 480rpx;
		height: 33rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #3D444D;
		opacity: 1;
		margin-left: 15rpx;
	}

	/* 公告 */


	/* 分类 */
	.active_title {
		font-size: 32rpx !important;
		font-family: PingFang SC;
		font-weight: bold !important;
		color: #333333 !important;
		opacity: 1;
	}

	.classify_title {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
		opacity: 1;
	}

	.classify_bottom {
		height: 6rpx;
		background: #00D88F;
		opacity: 1;
		border-radius: 3rpx;
	}

	.classify_heng {
		height: 6rpx;
		opacity: 1;
		border-radius: 3rpx;
	}

	/* 分类 */


	/* 积分操作 */

	.integral {
		width: 710rpx;
		height: 200rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 20rpx;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 10rpx;
	}

	.integral_image {
		width: 670rpx;
		height: 162rpx;
		opacity: 1;
		border-radius: 9rpx;
	}

	/* 积分操作 */



	.filtrate_address {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 150rpx;
		background: #EEEEEE !important;
		border-radius: 25px;
		text-align: center;
		color: #333333;
		padding: 5rpx 10rpx;
		opacity: 1 !important;
	}

	.filtrate_address2 {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 150rpx;
		background: #ffffff;
		border-radius: 25px;
		text-align: center;
		color: #333333;
		padding: 5rpx 10rpx;
		opacity: 1 !important;
	}


	/* 招聘岗位 */
	.work {
		padding: 30rpx;
	}

	.work_title {
		height: 45rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		opacity: 1;
	}

	.work_pay {
		height: 42rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FF150D;
		opacity: 1;
	}

	.award_title {
		border-radius: 6rpx;
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 28rpx;
		color: #333333;
		background: #EEEEEE;
		opacity: 1;
		margin-left: 1;
		padding: 10rpx;
		margin-right: 10rpx;
		margin-top: 10rpx;
	}

	.award_type_pay {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
		opacity: 1;
	}

	.award_image {
		width: 62rpx;
		height: 62rpx;
		background: #00D88F;
		opacity: 1;
		border-radius: 10rpx;
	}

	.award_name {
		width: 387rpx;
		height: 37rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		opacity: 1;
	}

	.award_icon {
		width: 15rpx;
		height: 18rpx;
		opacity: 1;
	}

	.award_content {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #A7A7A7;
		opacity: 1;
	}

	.award_submit {
		width: 100rpx;
		height: 50rpx;
		background: #00D88F;
		opacity: 1;
		border-radius: 25rpx;
		line-height: 50rpx;
		text-align: center;
		color: white;
	}

	/* 招聘岗位 */
	page {
		padding-bottom: 100rpx;
	}

	.filtrate_type {
		padding: 10rpx 20rpx;
		margin-right: 10rpx;
		border-radius: 99rpx;
	}

	.filtrate_type_active {
		background-color: #EEEEEE;
		color: #000000 !important;
	}
</style>
